<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>产品试用列表</title>
	    <link rel="icon shortcut" type="image/x-icon" href="../../img/common/favicon.ico"/>
	    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_357896_h659h7bkkvbr19k9.css"/>
	    <link rel="stylesheet" type="text/css" href="../../css/probation.css"/>
	    <link rel="stylesheet" type="text/css" href="../../css/swiper.css"/>
	    <script src="../../js/viewport.js" ></script>
	</head>
	<body>
		<section class="probation-banner swiper-container">
			<ul class="swiper-wrapper">
				<li class="swiper-slide">
					<a href=""><img src="../../img/probation/banner.jpg" alt="" /></a>
				</li>
				<li class="swiper-slide">
					<a href=""><img src="../../img/probation/banner.jpg" alt="" /></a>
				</li>
				<li class="swiper-slide">
					<a href=""><img src="../../img/probation/banner.jpg" alt="" /></a>
				</li>
			</ul>
			<div class="swiper-pagination"></div>
		</section>
		<section class="probation-flow">
			<h2 class="probation-title">试用流程</h2>
			<ul class="flow-list">
				<li class="flow-list-li">
					<span class="li-num">1</span>
					<span class="li-text">开放申请</span>
				</li>
				<li class="flow-list-li">
					<span class="li-num">2</span>
					<span class="li-text">名单公布</span>
				</li>
				<li class="flow-list-li">
					<span class="li-num">3</span>
					<span class="li-text">产品试用</span>
				</li>
				<li class="flow-list-li">
					<span class="li-num">4</span>
					<span class="li-text">提交报告</span>
				</li>
				<li class="flow-list-li">
					<span class="li-num">5</span>
					<span class="li-text">活动结束</span>
				</li>
			</ul>
		</section>
		<section class="probation-list">
			<h2 class="probation-title">免费试用</h2>
			<ul class="product-list">
				<li class="product-list-li">
					<div class="product-img">
						<a href="probation-detail.html">
							<img src="../../img/probation/list-img.jpg"/>
							<span class="product-state yellow">未开始</span>
						</a>
					</div>
					<div class="product-text clearfix">
						<div class="product-text-left">
							<p class="product-title"><a href="probation-detail.html">机器人蓝牙音箱</a></p>
							<span class="product-price">价值：<i class="blue">299</i></span>
						</div>
						<div class="product-text-right">
							<p class="product-time"><i class="gary">2018-06-10 10:00</i>开放申请</p>
							<span class="product-number">试用名额：5名</span>
						</div>
					</div>
				</li>
				<li class="product-list-li">
					<div class="product-img">
						<a href="probation-detail.html">
							<img src="../../img/probation/list-img.jpg"/>
							<span class="product-state blue">开放申请</span>
						</a>
					</div>
					<div class="product-text clearfix">
						<div class="product-text-left">
							<p class="product-title"><a href="probation-detail.html">机器人蓝牙音箱</a></p>
							<span class="product-price">价值：<i class="blue">299</i></span>
						</div>
						<div class="product-text-right">
							<p class="product-time">倒计时:<i class="gary">7天 19时 36分</i></p>
							<span class="product-number">试用名额：5名</span>
						</div>
					</div>
				</li>
				<li class="product-list-li">
					<div class="product-img">
						<a href="probation-detail.html">
							<img src="../../img/probation/list-img.jpg"/>
							<span class="product-state gray">结束申请</span>
						</a>
					</div>
					<div class="product-text clearfix">
						<div class="product-text-left">
							<p class="product-title"><a href="probation-detail.html">机器人蓝牙音箱</a></p>
							<span class="product-price">价值：<i class="blue">299</i></span>
						</div>
						<div class="product-text-right">
							<p class="product-time"></p>
							<span class="product-number">试用名额：5名</span>
						</div>
					</div>
				</li>
			</ul>
		</section>
		
		<div class="site-window win-apply">
			<div class="container">
				<div class="win-content">
					<textarea class="apply-state" name="apply-state" placeholder="请输入申请理由，限制250字以内。"></textarea>
					<button class="btn applybtn" type="submit">确认申请</button>
				</div>
			</div>
		</div>
		<div class="site-window win-applysuccess">
			<div class="container">
				<div class="win-content">
					<h3>申请成功</h3>
					<p>开放申请结束后将会在来设计官网 <br />公布试用名单 敬请留意! </p>
					<button class="btn applybtn" type="button">关闭</button>
				</div>
			</div>
		</div>
		<div class="site-window win-applysuccess">
			<div class="container">
				<div class="win-content">
					<h3>申请成功</h3>
					<p>开放申请结束后将会在来设计官网 <br />公布试用名单 敬请留意! </p>
					<button class="btn successbtn" type="button">关闭</button>
				</div>
			</div>
		</div>
		<div class="site-window win-nologin">
			<div class="container">
				<div class="win-content">
					<h3>登录后申请</h3>
					<p>您的微信尚未绑定账号，登录后即可申请。<br /> 如还未注册，请在注册后申请。</p>
					<a class="btn loginbtn">登录</a>
					<a class="btn registerbtn">注册</a>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/jquery-2.1.0.js" ></script>
	<script src="../../js/swiper.min.js" ></script>
	<script src="../../js/common/mock.js"></script>
	<script>
//		Mock.mock('http://probationbanner.com','get',{
//			'imglist|4':[{
//				'imageurl':Mock.mock('@url'),
//				'image':Mock.mock('@image(375x130)')
//			}]
//		});
//		$.ajax({
//			url:"http://probationbanner.com",
//			type:'get',
//			dataType: 'json',
//			success:function(res){
//		        console.log(res);
//		        var swiperurl = $('.swiper-slide a'),
//		        	swiperimg = $('.swiper-slide img');
////		       	for(key in res.imglist){
////		       		swiperurl.attr('href',res.imglist[key].imageurl);
////		       		swiperimg.attr('src',res.imglist[key].image);
////		       	}
//		    }
//		});
	</script>
	<script>
		var mySwiper = new Swiper('.swiper-container',{
			loop: true,
			autoplay: 5000,
			pagination: '.swiper-pagination',
			paginationClickable: true,
		});
	</script>
</html>
